<template>
	<view class="content">
		<view class="row1">
			<view class="row1_left">
				<text class="row1_left_title">当前余额：</text>
				<text class="row1_left_qian">¥</text>
				<text class="row1_left_num">{{myMoney}}</text>
			</view>
		</view>
		<view class="row2">充值金额：</view>
		<view class="row3"><view class="row3_item">¥<input class="row3_input" type="number" v-model="money"/></view></view>
		<view class="row2">支付方式：</view>
		<view class="row4">
			<radio-group @change="radioChange">
				<view class="row4_item" v-for="(item, index) in items" :key="item.value">
					<view class="row4_item_letf">
						<i :class="item.class"></i>
						<text>{{item.text}}</text>
					</view>
					<view class="row4_item_rgith">
						<radio :value="item.value" :checked="index === current" />
					</view>
				</view>
			</radio-group>
			<!-- <navigator hover-class="false" class="row4_item" url="addBankcard">
				<view class="row4_item_letf">
					<i class="iconfont iconyinhangka icon-styl4"></i>
					<text>银行卡</text>
					<text class="addCard">暂无银行卡，前往添加银行卡</text>
				</view>
				<view class="row4_item_rgith">
					<i class="iconfont iconjiantou icon-styl5"></i>
				</view>
			</navigator> -->
		</view>
		<view class="btn" @click="yesPay">确认支付</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [
					// {
					// 	class: 'iconfont iconzhifubao icon-styl1',
					// 	text: '支付宝支付',
					// 	value: 1
					// },
					{
						class: 'iconfont iconweixinzhifu icon-styl2',
						text: '微信支付',
						value: 2
					}
				],
				myMoney: 100,
				money: 0,
				current: 0,
				pay: 1
			}
		},
		onLoad(e) {
			this.myMoney = e.money;
		},
		methods: {
			radioChange(evt) {
				this.pay = evt.target.value;
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i;
						break;
					}
				}
			},
			yesPay() {
			if (this.money >= 1) {
				this.$zapi.apiPost('user/pay/pay_order', {
					pay_type: 'wx',
					totle_sum: this.money
				}).then(res => {
					if (res.data.code == 200 && res.data.data) {
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: res.data.data[0].data,
							success: e => {
								uni.showToast({
									title: '支付成功!'
								});
							},
							fail: e => {
								uni.showModal({
									content: '支付失败!',
									showCancel: false
								});
							}
						});
			
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				});
			} else {
				uni.showToast({
					title: '充值金额需不低于1元',
					icon: 'none'
				})
			}
			}
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	.content {
		width: 100%;
		height: 100%;
		position: absolute;
		background: rgba(243, 243, 243, 1);
	}

	.row1 {
		width: 100%;
		height: 90upx;
		line-height: 90upx;
		display: flex;
		background: #FFFFFF;
		justify-content: space-between;
	}

	.row1_left {
		width: 94%;
		margin: auto;
		line-height: 90upx;
	}

	.row1_left_title {
		font-size: 34upx;
		color: #333333;
	}
	.row1_left_qian{
		font-size: 30upx;
		margin-right: 5upx;
	}

	.row1_left_num {
		font-weight: bold;
		font-size: 36upx;
		color: #333333;
	}

	.row1_rigth {
		/* padding-right: 30upx; */
		line-height: 90upx;
		display: flex;
		flex-direction: row;
	}

	.row1_rigth_title {
		color: #999999;
		font-size: 28upx;
		margin-right: 10upx;
	}

	.qwert {
		color: #999999;
		font-size: 36upx;
		line-height: 90upx;
	}

	/**
	 * 
	 */
	.row2 {
		width: 94%;
		margin: auto;
		height: 80upx;
		line-height: 80upx;
		color: #999999;
		font-size: 34upx;
		/* padding-left: 30upx; */

	}

	.row3 {
		height: 120upx;
		background: #FFFFFF;
		
	}
	.row3_item{
		width: 94%;
		margin: auto;
		color: #666666;
		font-size: 44upx;
		display: flex;
		justify-content: flex-start;
		/* padding-left: 40upx; */
		line-height: 120upx;
		align-items: center;
	}
	.row3_input {
		font-size: 60upx;
		height: 120upx;
	}

	.row4 {
		width: 100%;
		background: #FFFFFF;
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
	}
	
	.row4_item_letf {
		display: flex;
		justify-content: flex-start;
		height: 101upx;
		line-height: 101upx;
	}
	.row4_item_letf text{
		color: #333333;
		font-size: 34upx;
	}
	.icon-styl5{
		color: #999999;
		display: inline-flex;
		line-height: 98upx !important;
	}
	.addCard{
		font-size: 28upx !important;
		color: #999999 !important;
		display: inline-flex;
		position: absolute;
		right: 100upx;
	}

	.row4_item {
		width: 92%;
		margin: auto;
		height: 101upx;
		line-height: 101upx;
		display: flex;
		justify-content: space-between;
		border-top:2upx solid rgba(229,229,229,0.6);
	}
	.row4 .row4_item:first-child{
		border: none;
	}
	.row4_item_rgith {
		height: 101upx;
		line-height: 101upx;

	}
	.row4_item_rgith radio{
		transform: scale(0.75);
	}
	.row4_item_rgith .uni-radio-input.uni-radio-input-checked {
		border: 1px solid #FF9900 !important;
		background: #FF9900 !important;
	}

	i{
		font-size: 50upx;
		margin-right: 15upx;
		line-height: 108upx;
	}
	.icon-styl1 {
		color: #1296DB !important;
	}
	.icon-styl2 {
		color: #41B035 !important;
	}
	.icon-styl3{
		color: #00D5A2;
	}
	.icon-styl4{
		color: #2F77F1;
	}
	.btn {
		width: 92%;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		margin: auto;
		margin-top: 58upx;
		font-size: 34upx;
		color: #FFFFFF;
		background: #FF9900;
		border-radius: 8upx;
	}
</style>
